<template>
  <el-aside width="240px" class="aside">
    <el-menu class="menu" :default-active="activeMenu" background-color="#FFDDC1" text-color="#333" active-text-color="#FF5733" mode="vertical">
      <el-menu-item index="1" @click="navigateTo('/home')">
        <el-icon><House /></el-icon> 首页
      </el-menu-item>
      <el-menu-item index="2" @click="navigateTo('/user')">
        <el-icon><User /></el-icon> 个人信息
      </el-menu-item>
      <el-menu-item index="3" @click="navigateTo('/restaurant')">
        <el-icon><Food /></el-icon> 餐厅详情
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: "1" // 默认激活的菜单项
    };
  },
  methods: {
    navigateTo(route) {
      this.$router.push(route); // 使用 Vue Router 进行跳转
    }
  }
};
</script>

<style scoped>
.aside {
  background-color: #FFDDC1; /* 柔和的桃红色 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.menu {
  margin-top: 20px;
  padding: 20px;
  background-color: #FFE6CC; /* 更加温暖的浅橙色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.menu:hover {
  background-color: #FFD1BA; /* 悬停时的渐变背景 */
}

</style>
